import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Table, Pagination, Button, Message } from '@alifd/next';

import request from '../../utils/request';

export default class Gallery extends Component {
  static displayName = 'Gallery';

  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      size: 20,
    };
  }

  componentDidMount() {
    this.getList(1);
  }

  pageChange = (value) => {
    this.getList(value);
  }

  getList = (page) => {
    const { size } = this.state;
    this.setState({
      loading: true,
    });
    request.get(`/gallery/new/${page}/${size}`)
      .then((res) => {
        if (res.code === 200) {
          const list = res.data.list.map((item) => {
            return { ...item, ...{ publishTime: '2019-01-23 10:20:20' } };
          });

          this.setState({
            dataSource: list || [],
            total: res.data.total,
          });
        }
      }).finally(() => {
        this.setState({
          loading: false,
        });
      });
  }

  editorGallery = (id) => {
    this.props.history.push(`/gallery-editor/${id}`);
  }

  deleteGallery = (value) => {
    const { dataSource } = this.state;
    this.setState({
      loading: true,
    });
    request.delete(`/gallery/${value}`)
      .then((res) => {
        if (res.code === 200) {
          this.setState({
            dataSource: dataSource.filter((item) => {
              return item.id !== value;
            }),
          });

          Message.success('删除成功');
        } else {
          Message.error('删除失败');
        }
      }).finally(() => {
        this.setState({
          loading: false,
        });
      });
  }

  coversRender = (value) => {
    let list = [];
    if (value && value.length > 0) {
      list = value.split(',');
    }
    return (
      <React.Fragment>
        {
          list.length && list.map((item) => {
            return (
              <img src={item} key={item} style={{ display: 'inline-block', margin: '5px', width: '30px', height: '30px' }} alt={item} />
            );
          })
        }
      </React.Fragment>
    );
  }

  actionsRender = (value) => {
    return (
      <React.Fragment>
        <Button type="primary" onClick={this.editorGallery.bind(this, value)}>编辑</Button>
        <Button type="primary" onClick={this.deleteGallery.bind(this, value)}>删除</Button>
      </React.Fragment>
    );
  }

  render() {
    const { dataSource, loading, total } = this.state;
    return (
      <div className="card-bg">
        <Link to="/gallery-editor/0">
          <Button type="primary">新增</Button>
        </Link>
        <Table dataSource={dataSource} loading={loading}>
          <Table.Column title="Id" dataIndex="id" />
          <Table.Column title="描述" dataIndex="title" />
          <Table.Column title="分类" dataIndex="category" />
          <Table.Column title="图片" dataIndex="covers" cell={this.coversRender} />
          <Table.Column title="发布时间" dataIndex="publishTime" />
          <Table.Column title="操作" dataIndex="id" cell={this.actionsRender} />
        </Table>
        <div style={{ marginTop: '15px' }}>
          <Pagination defaultCurrent={1} onChange={this.pageChange} total={total} />
        </div>
      </div>
    );
  }
}
